CSS是层叠样式表。下面，我们来看看怎么使用CSS让图片水平垂直都居中吧。

新建一张文档 在桌面新建一张文本文档，改名为1.txt，如下图所示：

基础代码 然后打开文本文档，编写基础代码，再把桌面上的老虎图片引入进去，如下图所示：

后缀名 然后把文本文档后缀名改为.html，如下图所示：

运行网页 然后在浏览器中运行网页，现在图片有了，只是还没有居中，图片居住代码要用CSS写，如下图所示：

CSS代码 然后写上CSS代码，如下图所示：

垂直水平居中 可以看到图片已经垂直和水平居中，如下图所示：

总代码 《!DOCTYPE html》

《head》

《title》html《/title》 《style type=“text/css“》 .picTiger{ margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; }

《/style》 《/head》

《body》

《img class=“picTiger“ src=“C:/Users/Administrator/Desktop/1.png“》

《/body》

《html》

1、首先先在页面里加载一张图片，代码和效果如下图所示：

2、然后设置给图片起一个class名，方便一会儿的操作。

3、然后给图片设置css样式，因为方便的原因就直接在html页面写css样式了。

4、经常使用“margin: 0 auto”来实现水平居中，而一直认为“margin: auto”是不能实现垂直居中，但是实际上，仅需要添加一些限制便能实现效果，就是通过定位：

position: absolute;  

top: 0;

left: 0;

bottom: 0;

right: 0;  

设置定位让上下左右都为0，然后通过margin：0 auto，来让元素实现上下左右都居中。

5、设置完CSS样式之后，通过浏览查看代码的效果就可以，可以看到图片已经实现了。

6、最后给大家附上全部的代码：

《!DOCTYPE html》

《html》

《head》

《meta charset=“utf-8“ /》

《title》使用CSS让图片水平垂直居中《/title》

《/head》

《body》

《img class=“pic“ src=“img/timg.jpg“ alt=““ /》

《/body》

《style type=“text/css“》

.pic{

margin: auto;  

position: absolute;  

top: 0;

left: 0;

bottom: 0;

right: 0;  

}

《/style》

《/html》

你需要用到background-position这个属性，用以规定背景图片的位置。让图片居中偏下的代码为：

background-positon:center bottom; 或 background-positon:bottom;

全部的位置代码如下：

background-position: left;  代表背景图横向（X轴）靠左，纵向（Y轴）居中。（9点钟位置）

background-position: right;  代表背景图横向（X轴）靠右，纵向（Y轴）居中。（3点钟位置）

background-position: top;  代表背景图横向（X轴）居中，纵向（Y轴）靠上。（12点钟位置）

background-position: bottom;  代表背景图横向（X轴）居中，纵向（Y轴）靠下。（6点钟位置）

background-position: center;  代表背景图横向（X轴）居中，纵向（Y轴）居中。（绝对居中）

background-position: left top;  代表背景图横向（X轴）靠左，纵向（Y轴）靠上。（10点钟位置）

background-position: left bottom;  代表背景图横向（X轴）靠左，纵向（Y轴）靠下。（7点钟位置）

background-position: right top;  代表背景图横向（X轴）靠右，纵向（Y轴）靠上。（1点钟位置）

background-position: right bottom;  代表背景图横向（X轴）靠右，纵向（Y轴）靠下。（5点钟位置）

1、打开在线写前端代码的网站如jsrun或者jsfiddle。

目2、标是做一个如图所示的效果，不同大小的图片。

3、每个方框的html 如下，

《div》

《span》

《img src=’图片地址’》

《/img》

《/span》

《/div》

4、css如下，其中需要注意的是，不要设置最外层div的大小，只设置span的大小，让span的大小决定div的大小。

其中

display: table-cell;

text-align: center;

vertical-align: middle;

这3行决定居中效果。

其中

img {

max-width: 100%;

max-height: 100%;

}

的目的是让图片可以缩放而比例不变。

div {

float:left;

margin:5px;

padding:5px;

border:1px solid #000;

}

span {

font-size: 0;

width: 150px;

height: 150px;

display: table-cell;

text-align: center;

vertical-align: middle;

}

img {

max-width: 100%;

max-height: 100%;

}

5、效果如下，很好的实现居中。

6、上面是div为float的情况

div如果是absolute或fixed也可以正常表现。

只有一个div的情况下，代码如下

《div》

《span》

《img src=’图片地址’》

《/img》

《/span》

《/div》

div {

margin:5px;

padding:5px;

border:1px solid #000;

position: absolute;

left:100px;

top:100px;

}

span {

font-size: 0;

width: 150px;

height: 150px;

display: table-cell;

text-align: center;

vertical-align: middle;

}

img {

max-width: 100%;

max-height: 100%;

}

7、这张图片仍然是居中的，没有收到父容器的影响。

1，可以用弹性容器来实现居中。2，用《p align=“centger“》《img src=“###“》《/p》来实现居中。3，容器和图片都设置宽度高度，已经知道宽度高度情况下，用margin-top,margin-left等方式来设置居中。3，用相对定位方式实现居中。margin:0 auto;4,对容器设置text-align:center;方式来实现居中。

1、首先打开前端开发工具，新建一个html代码页面。

2、在html代码页面上创建一个用于设置背景颜色的div标签，然后给这个标签添加上class = “bg-img“。

3、设置背景图片。创建style标签，然后在标签里面对类为bg-img设置背景图片、图片不重复、宽、高的样式。

4、保存html代码，使用浏览器打开，这个时候会发现浏览器上的背景图片显示在左上角。

5、回到html代码页面，在bg-img类里添加background-position: center的属性。

6、保存html代码后重新刷新浏览器，这个时候会发现浏览器上的背景图片已经自动居中了。

1、首先，打开html器，新建html文件，例如：index.html。

2、在index.html中的《style》标签中，输入css代码：span {position: absolute; top: 45px; left: 180px;}。

3、浏览器运行index.html页面，此时成功通过css设置了文字在图片上面居中显示。

可以为盒子添加“text-align: center;”样式使图片在盒子中居中。

1、新建html文档，在body标签中添加一个div盒子，然后在这个div盒子中添加一张图片：

2、为div盒子和图片添加一些样式，这时默认情况下图片会向盒子的左上角对齐：

3、为div盒子添加“text-align: center;”样式，这时图片会在div盒子中居中对齐：

写个简单的例子给你吧

htlm如下：

《h4》图片水平居中《/h4》《div class=“demo1“》《img src=“你的图片“ alt=““》《/div》《h4》图片垂直居中《/h4》《div class=“demo2“》《div class=“imgbox“》《img src=“你的图片“ alt=““》《/div》《/div》《h4》图片水平垂直居中《/h4》《div class=“demo3“》《div class=“imgbox“》《img src=“你的图片“ alt=““》《/div》《/div》

css如下：

《style type=“text/css“》.demo1{width: 200px;height: 200px;border: 1px solid #ccc;display: inline-block;text-align: center;}.demo1 img{width: 100px;height: auto;}.demo2{width: 200px;height: 200px;border: 1px solid #ccc;display: table;}.demo2 .imgbox{display: table-cell;vertical-align: middle;}.demo2 .imgbox img{width: 100px;height: auto;}.demo3{width: 200px;height: 200px;border: 1px solid #ccc;display: table;}.demo3 .imgbox{display: table-cell;vertical-align: middle;text-align: center;}.demo3 .imgbox img{width: 100px;height: auto;}《/style》

方法和详细的操作步骤如下：

1、第一步，打开前端开发工具，然后创建一个新的html代码页，见下图，转到下面的步骤。

2、第二步，执行完上面的操作之后，创建一个div标签以设置html代码页的背景色，然后将class  =“ bg-img”添加到标签中，见下图，转到下面的步骤。

3、第三步，执行完上面的操作之后，设置背景图片，创建一个样式标签，然后设置背景图像、该图像不重复以及标签中bg-img的类的宽度和高度，见下图，转到下面的步骤。

4、第四步，执行完上面的操作之后，保存html代码，然后使用浏览器打开，浏览器上的背景图像将显示在左上角，见下图，转到下面的步骤。

5、第五步，执行完上面的操作之后，返回html代码页，在bg-img类中添加background-position：center属性，见下图，转到下面的步骤。

6、第六步，执行完上面的操作之后，保存html代码并刷新浏览器，会发现浏览器上的背景图像已自动水平居中，见下图。这样，就解决了这个问题了。